<template>
	<view>
		<view class="List" v-if="st == 1">
			<view class="p-header" style="border-bottom: 1rpx solid #f4f4f4;">
				<view class="p-name">
					客户资料
				</view>
				<view class="p-status">
				</view>
			</view>
			<view class="p-content">
				<view class="p-left">
					客户姓名
				</view>
				<view class="p-right">
					<input type="text" v-model="order.kename" disabled />
				</view>
			</view>
			<view class="p-content">
				<view class="p-left">
					客户电话
				</view>
				<view class="p-right">
					<input type="text" v-model="order.ketel" disabled />
				</view>
			</view>
			<view class="p-content" style="padding-bottom: 40rpx;">
				<view class="p-left">
					客户地址
				</view>
				<view class="p-right">
					<input type="text" v-model="order.keadress" disabled />
				</view>
			</view>
		</view>
		<view class="List">
			<view class="p-header" style="border-bottom: 1rpx solid #f4f4f4;">
				<view class="p-name">
					产品信息（旧）
				</view>
				<view class="p-status">
				</view>
			</view>
			<view class="p-content">
				<view class="p-left">
					产品重量Kg
				</view>
				<view class="p-right">
					<input type="text" v-model="guanziInfo.name" disabled />Kg
				</view>
			</view>
			<view class="p-content">
				<view class="p-left">
					产品状态
				</view>
				<view class="p-right">
					<text v-if="guanziInfo.status == 'zz'">在租</text>
					<text v-if="guanziInfo.status == 'kx'">空闲</text>
				</view>
			</view>
			<view class="p-content">
				<view class="p-left">
					押金
				</view>
				<view class="p-right">
					{{ guanziInfo.yajin }}元
				</view>
			</view>
			<view class="p-content" style="padding-bottom: 20rpx;">
				<view class="p-left">
					租金/30天
				</view>
				<view class="p-right">
					{{ guanziInfo.zujin }}/30天
				</view>
			</view>
			<view class="p-content" style="padding-bottom: 20rpx;">
				<view class="p-left">
					已用天数
				</view>
				<view class="p-right">
					{{ jisuans.days }}天
				</view>
			</view>
			<view class="p-content" style="padding-bottom: 20rpx;">
				<view class="p-left">
					应收金额
				</view>
				<view class="p-right">
					{{ jisuans.money }}元
				</view>
			</view>
			<view class="p-contents" style="padding-bottom: 20rpx;">
				<view class="p-top">
					备注
				</view>
				<view class="p-bottom">
					<view class="" v-if="order.remark">
						{{ order.remark }}
					</view>
					<view class="" v-else>
						暂无
					</view>
				</view>
			</view>
		</view>
		<view class="List">
			<view class="p-header" style="border-bottom: 1rpx solid #f4f4f4;">
				<view class="p-name">
					产品信息（新）
				</view>
				<view class="p-status" @tap="scan">
					<u-icon name="scan" color="#669bf9" size="22"></u-icon>
				</view>
			</view>
			<block v-if="newguaninfo.id">
				<view class="p-content">
					<view class="p-left">
						产品重量Kg
					</view>
					<view class="p-right">
						<input type="text" v-model="newguaninfo.product" placeholder="请输入产品重量" />
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						租金/30天
					</view>
					<view class="p-right">
						<input type="number" v-model="newguaninfo.rimoney" placeholder="请输入租金" />
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						押金
					</view>
					<view class="p-right">
						<input type="number" v-model="newguaninfo.yajin" placeholder="请输入租借押金" />
					</view>
				</view>
				<view class="p-content">
					<view class="p-left">
						价格
					</view>
					<view class="p-right">
						<input type="number" v-model="newguaninfo.price" placeholder="请输入价格" />
					</view>
				</view>
				<view class="p-contents" style="padding-bottom: 20rpx;">
					<view class="p-top">
						备注
					</view>
					<view class="p-bottom">
						<textarea v-model="remark" placeholder="请输入备注" cols="30" rows="10"></textarea>
					</view>
				</view>
			</block>
		</view>
		<view class="block" style="width: 100%;height: 200rpx;">

		</view>
		<view class="sub-btn">
			<view class="submit" @tap="submit">
				提交资料
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jisuans: '',
				id: '', //旧产品ID
				guanziInfo: '',
				newguaninfo: '',
				order: '',
				zguanzi_id: '', //新产品ID
				zuri: '请选择租借日期', //租借日期
				guiri: '请选择归还日期', //归还日期
				yajin: '', //押金
				money: '', //金额合计
				rimoney: '',
				type: '',
				remark:'',
				st:0
			}
		},
		onShow() {
			this.st = uni.getStorageSync('st')
		},
		onLoad(options) {
			this.id = options.id
			this.type = options.type
			this.getdetails()
		},
		methods: {
			submit() {
				uni.showLoading({
					title: '正在加载'
				})
				if (!this.newguaninfo.id) {
					uni.showToast({
						title: '请先扫码',
						icon: 'none'
					})
					return
					if (!this.newguaninfo.yajin || !this.newguaninfo.price || this.newguaninfo.rimoney) {
						uni.showToast({
							title: '请填写信息',
							icon: 'none'
						})
						return
					}
				}
				this.$http.Post('cper/guanhuan', {
					oldguanzi_id: this.guanziInfo.id, //旧ID
					zguanzi_id: this.newguaninfo.id, //新产品ID
					// zuri: this.zuri,
					// guiri: this.guiri,
					yajin: this.newguaninfo.yajin,
					price: this.newguaninfo.price,
					rimoney: this.newguaninfo.rimoney,
					product: this.newguaninfo.product,
					remarks:this.remark
					// money: this.money
				}, (result) => {
					uni.hideLoading()
					uni.showToast({
						title: result.msg,
						icon: 'success'
					})
					setTimeout(res => {
						uni.switchTab({
							url: '/pages/index/index'
						})
					}, 600)
				})
			},
			all() {
				uni.showLoading({
					title: '正在计算'
				})
				this.$http.Post('cper/jisuan', {
					order_id: this.order.id,
					zguanzi_id: this.guanziInfo.id
				}, (result) => {
					uni.hideLoading()
					this.jisuans = result.data
					console.log(this.jisuans, '是啥')
				})
			},
			zu(e) {
				this.zuri = e.detail.value
				if (this.guiri != '请选择归还日期') {
					this.all()
				}
			},
			gui(e) {
				this.guiri = e.detail.value
				if (this.guiri != '请选择租借日期') {
					this.all()
				}
			},
			scan() {
				uni.scanCode({
					success: (res) => {
						this.zguanzi_id = res.result
						this.$http.Post('cper/chanInfo', {
							zguanzi_id: this.zguanzi_id, //产品ID
							type: 1
						}, (result) => {
							uni.hideLoading()
							this.newguaninfo = result.data.guanziInfo
							this.newguaninfo.yajin = this.guanziInfo.yajin
							uni.showToast({
								title: '扫码成功',
								icon: 'success'
							})
						})
					},
					fail: (err) => {
						uni.showToast({
							title: '扫码失败',
							icon: 'none'
						})
					}
				})
			},
			getdetails() {
				uni.showLoading({
					title: '正在加载'
				})
				this.$http.Post('cper/chanInfo', {
					zguanzi_id: this.id, //产品ID
					type: this.type
				}, (result) => {
					uni.hideLoading()
					this.guanziInfo = result.data.guanziInfo
					this.order = result.data.order
					this.all()
				})
			},
		}
	}
</script>

<style>
	.List {
		margin: 20rpx auto;
		width: 94%;
		border-radius: 16rpx;
		background-color: #fff;
	}

	.p-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 94%;
		margin: 0 auto;
		height: 90rpx;
	}

	.p-name {
		font-weight: bold;
	}

	.p-status {
		border-radius: 8rpx;
		font-size: 28rpx;
		padding: 5rpx 12rpx;
		background-color: #f0f5fc;
		color: #669bf9;
	}

	.from {
		padding: 20rpx 0;
		width: 94%;
		border: 1rox solid black;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.p-content {
		width: 94%;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		color: #7a7a7a;
		font-size: 30rpx;
		height: 65rpx;
	}

	.p-left {
		width: 25%;
		height: 100%;
		display: flex;
		align-items: center;
		font-weight: bold;

	}

	.p-right {
		width: 75%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
	}

	.sub-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.submit {
		width: 94%;
		height: 90rpx;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		background-color: #669bf9;
	}
	.p-contents {
		width: 94%;
		margin: 20rpx auto;
		color: #7a7a7a;
		font-size: 30rpx;
	}
	.p-top{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		font-weight: bold;
	}
	
	.p-bottom{
		padding-top: 30rpx;
	}
</style>